<template>
  <div class="global-container">
    <div class="global-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/current.png')"
      ></el-image>
      <div class="title">
        审计日志
        <div class="title-content">
          提供系统审计日志管理能力，支持审计日志以时间、关键字方式检索，提供审计日志的导出等功能。
        </div>
      </div>
    </div>
    <div class="user-info">
      <div class="user-operate">
        <el-row :gutter="10">
          <el-col :xs="7" :sm="7" :md="6" :lg="6" :xl="6">
            <span class="keyword1">关键词</span>
            <el-input
              placeholder="通过日志信息检索"
              style="width: 70%; margin-left: 5px"
              clearable
              v-model="searchKeyword"
              @input="handleSearch"
            >
            </el-input>
          </el-col>
          <el-col :xs="7" :sm="7" :md="6" :lg="7" :xl="6">
            <span class="keyword1">操作分类</span>
            <el-select
              v-model="operationValue"
              style="margin-left: 5px; width: 65%"
              clearable
              placeholder="请选择操作分类"
              @input="handleOperationValueSearch"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :xs="7" :sm="7" :md="10" :lg="9" :xl="9">
            <span class="keyword1">起止日期</span>
            <el-date-picker
              class="dateSelector"
              style="width: 65%"
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              @input="selectedDate"
            >
            </el-date-picker>
          </el-col>
          <el-col :xs="3" :sm="3" :md="2" :lg="2" :xl="1">
            <div class="operate" v-if="multipleSelection.length">
              <el-button
                type="primary"
                @click="downloadSelectedRow"
                class="el-button-primary-style"
                >下载
              </el-button>
            </div>
          </el-col>
        </el-row>
        <!--        <span class="keyword">关键词</span>-->
        <!--        <el-input-->
        <!--          placeholder="通过日志信息检索"-->
        <!--          style="width: 20%; margin-left: 10px;"-->
        <!--          clearable-->
        <!--          v-model="searchKeyword"-->
        <!--          @input="handleSearch"-->
        <!--        >-->
        <!--        </el-input>-->
        <!--        &lt;!&ndash; 筛选 &ndash;&gt;-->
        <!--        <span class="keyword" style="margin-left: 30px;">操作分类</span>-->
        <!--        <el-select-->
        <!--          v-model="operationValue"-->
        <!--          style="margin-left: 10px"-->
        <!--          clearable-->
        <!--          placeholder="请选择操作分类"-->
        <!--          @input="handleOperationValueSearch"-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for="item in options"-->
        <!--            :key="item.value"-->
        <!--            :label="item.label"-->
        <!--            :value="item.value"-->
        <!--          >-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <!--        &lt;!&ndash; 日期选择器 &ndash;&gt;-->
        <!--        <span class="keyword" style="margin-left: 30px">起止日期</span>-->
        <!--        <div class="dateSelector">-->
        <!--          <el-date-picker-->
        <!--            v-model="date"-->
        <!--            type="daterange"-->
        <!--            range-separator="至"-->
        <!--            start-placeholder="起始日期"-->
        <!--            end-placeholder="截止日期"-->
        <!--            @input="selectedDate"-->
        <!--          >-->
        <!--          </el-date-picker>-->
        <!--        </div>-->
        <!--        <div class="operate" v-if="multipleSelection.length">-->
        <!--          &lt;!&ndash;          <el-button&ndash;&gt;-->
        <!--          &lt;!&ndash;            type="danger"&ndash;&gt;-->
        <!--          &lt;!&ndash;            @click="deleteSelectedRow"&ndash;&gt;-->
        <!--          &lt;!&ndash;            style="margin-left: 20px; width: 100px"&ndash;&gt;-->
        <!--          &lt;!&ndash;          >删除&ndash;&gt;-->
        <!--          &lt;!&ndash;          </el-button>&ndash;&gt;-->
        <!--          <el-button-->
        <!--            type="primary"-->
        <!--            @click="downloadSelectedRow"-->
        <!--            style="margin-left: 20px; width: 100px"-->
        <!--            class="el-button-primary-style"-->
        <!--          >下载-->
        <!--          </el-button>-->
      </div>
    </div>
    <div class="servicePackageList">
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        :data="tableData"
        @selection-change="handleSelectionChange"
        :cell-style="{ textAlign: 'left', padding: 0 }"
        :header-cell-style="{ textAlign: 'left' }"
        height="65vh"
      >
        <el-table-column type="selection" width="100rem"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <!-- <el-table-column prop="id" label="租户id" width="250rem">
        </el-table-column> -->
        <el-table-column label="操作分类">
          <template slot-scope="scope">
            <p>
              {{ getOperateTargetType(scope.row.targetType) }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作类型" prop="targetName"></el-table-column>
        <el-table-column label="日志信息" width="230">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.logInfo"
              placement="bottom-start"
              popper-class="tooltipClass"
              :disabled="isShowTooltip"
            >
              <div
                class="descSpan"
                style="text-align: left"
                @mouseover="onMouseOver($event)"
              >
                {{ scope.row.logInfo }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="operatorIp" label="操作IP"></el-table-column>
        <el-table-column prop="updateTime" label="操作时间"></el-table-column>
      </el-table>
      <div style="margin-top: 10px; float: right">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :current-page.sync="pagination.pageNum"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AuditLogs",
  data() {
    return {
      key: "value",
      options: [
        {
          value: 0,
          label: "认证操作",
        },
        {
          value: 1,
          label: "添加操作",
        },
        {
          value: 2,
          label: "删除操作",
        },
        {
          value: 3,
          label: "修改操作",
        },
        {
          value: 4,
          label: "服务实例操作",
        },
        {
          value: 5,
          label: "服务组实例操作",
        },
        {
          value: 6,
          label: "云原生实例操作",
        },
      ],
      isShowTooltip: false,
      // 操作分类内容
      operationValue: null,
      // 勾选框内容
      multipleSelection: [],
      tableData: [],
      selectedIds: [],
      searchKeyword: "",
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      date: "",
      startDate: "",
      endDate: "",
      filterKey: "",
      operationClassification: null,
    };
  },
  methods: {
    onMouseOver(event) {
      const ev = event.target;
      const evWeight = ev.scrollWidth;
      const contentWidth = ev.clientWidth;
      if (evWeight > contentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
    fetchLogData() {
      this.$auditLogApi
        .filterLogInfo({
          filterKey: this.searchKeyword,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          operationClassification: this.operationValue,
          startDate: this.startDate,
          endDate: this.endDate,
        })
        .then((res) => {
          if (res && res.code === 200) {
            this.tableData = res.data.records;
            this.pagination.total = res.data.total;
          }
        })
        .catch((error) => {
          console.log("111", error);
        });
    },
    //表格选择项，获得选中的行的信息数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.selectedIds = val.map((row) => row.id); // 所有选中行的 id
    },
    selectedDate() {
      this.startDate = "";
      this.endDate = "";
      if (this.date && this.date.length === 2) {
        const startDateTimestamp = this.date[0].getTime() / 1000;
        const endDateTimestamp = this.date[1].getTime() / 1000;

        this.startDate = startDateTimestamp.toString();
        this.endDate = endDateTimestamp.toString();
      }
      this.fetchLogData();
    },
    downloadSelectedRow() {
      const id = this.selectedIds;
      window.open(`/gv-kube/resource/operate/export?ids=${id}`);
    },
    handleSearch() {
      this.pagination.pageNum = 1; // 搜索时重置页码
      this.fetchLogData();
    },
    handleOperationValueSearch() {
      this.fetchLogData();
    },
    handlePageChange(pageNum) {
      this.pagination.pageNum = pageNum;
      this.fetchLogData();
    },
    getOperateTargetType(operateTarget) {
      const statusMap = {
        0: "认证操作",
        1: "添加操作",
        2: "删除操作",
        3: "修改操作",
        4: "服务实例操作",
        5: "服务组实例操作",
        6: "云原生实例操作",
      };
      return statusMap[operateTarget] || "未知类型";
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.fetchLogData();
    });
  },
};
</script>

<style scoped>
.user-info {
  margin-top: 10px;
}

.user-operate {
  background-color: #f9fbfd;
  padding: 10px 0;
}

.keyword1 {
  color: #7d7575;
  font-weight: bold;
  /*padding-left: 10px;*/
  font-size: 14px;
}

.dateSelector {
  margin-left: 10px;
  display: inline-block;
}

.operate {
  display: inline-block;
}

::v-deep .el-table thead {
  font-size: initial;
  color: #606266;
  font-weight: 500;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #304156;
}
</style>
